<template>
    <el-menu mode="horizontal" @select="goTo" ref="topmenu" :default-active="$route.name">
        <el-menu-item index="DisPartnerList">{{ $t("分销客户") }}</el-menu-item>
        <el-menu-item index="DisTradeAdd">
            <i class="el-icon-menu" color="#ff0000" />{{$t("创建商城订单")}}
        </el-menu-item>
        <div class="user-dropdown-menu-con" style="float: right;margin-top: 10px">
            <el-row type="flex" justify="end" align="middle" class="user-dropdown-innercon">
                <a href="javascript:void(0)" @click="goToBell">
                    <i :class="{ 'el-icon-bell abell': true, 'unread': sysUnread > 0 }">
                        <el-badge :value="sysUnread" v-if="sysUnread > 0"></el-badge>
                    </i>
                </a>
                <el-dropdown transfer trigger="click" @command="itemClick">
                    <a href="javascript:void(0)">
                        <span class="main-user-name">{{ userName }}（{{ merchId }}）,</span>
                        <i class="arrow-down-b" />
                    </a>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="ownSpace">{{ $t('修改密码') }}</el-dropdown-item>
                        <el-dropdown-item command="loginout" divided>{{ $t('退出登录') }}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown style="margin-left:10px;margin-right:10px;" transfer trigger="click" @command="langClick">
                    <el-button type="text">
                        {{ lang }}
                        <i class="arrow-down-b" />
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="zh_CH">简体中文</el-dropdown-item>
                        <el-dropdown-item command="en">English</el-dropdown-item>
                        <el-dropdown-item command="vn">Tiếng Việt</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-row>
        </div>
        <!-- <CWarehouseLogin ref="warehouseDialog" ></CWarehouseLogin> -->
    </el-menu>
</template>
<script>
import Constants from "@/utils/constants"
// import CWarehouseLogin from "@/components/CWarehouseLogin.vue"
export default {
    name: 'CpMenu',
    data() {
        return {
            avatorPath: '',
            interval: null,
        };
    },
    components: {


    },
    computed: {
        sysUnread: function() {

            return this.$store.state.notify.notifyCount.sysUnread;
        },

        vipName() {
            return localStorage.vipName;
        },
        userName() {
            // return this.$store.state.user.userName;
            return localStorage.userName;
        },

        merchId() {

            return localStorage.shippingNo;
        },
        lang() {
            return Constants.langs[this.$i18n.locale];
        }
    },
    updated() {
        this.$nextTick(() => {

            // if (this.$refs.topmenu) {
            //     this.$refs.topmenu.updateOpened();
            // }
        });
    },
    methods: {
        loadWarehouse: function() {

            // this.$refs.warehouseDialog.showDialog();
        },
        goToBell: function() {


            this.$router.push({ name: "Notification" }, () => {}, (e) => {

            });
        },
        goTo: function(active) {

            // if(active=='XiapiProductList')
            // {
            //     this.errorMessage("即将开放");
            //     return ;
            // }
            var cpmenu = this.$refs.topmenu;
            this.$router.push({ name: active }, () => {}, (e) => {

            });
            this.$emit('on-change', active);
        },
        itemClick: function(name) {

            if ("ownSpace" == name) {
                this.$router.push({ name: "Password" });
            } else
            if ("vipService" == name) {
                this.$router.push({ name: "VipService" });
            } else this.loginout();
        },
        langClick: function(name) {
            this.$i18n.locale = name;
            localStorage.setItem('lang', name);
            document.title = this.$i18n.t('公司名');
        },
        loginout: function(name) {

            var me = this;
            me.showLoading();
            me.$store
                .dispatch("loginOut")
                .then(res => {
                    me.hideLoading();
                    if (res.status == 0) {
                        me.$router.push("/login");
                    } else {
                        me.errorMessage(res.info);
                    }
                }).catch(error => {


                    me.errorMessage(me.$t('操作异常'));

                });
        }
    }
}
</script>
<style>
i.el-icon-bell.abell {
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    margin-right: 10px;
    padding-top: 10px;
    color: #409EFF;
    font-size: 1.5em;
    vertical-align: middle;
}

i.el-icon-bell.abell:hover {
    color: #cccccc;
}

i.el-icon-bell.abell.unread {
    color: #FF0000;
}
</style>